<template>
  <div id="CustomDirectives">
    <div v-test:top="200">I am a html element</div>
    <div v-color="{ bg: 'pink', cl: '#f00' }">I am a color demo</div>
    <CustomDirectivesComponent v-color="{ bg: 'yellow', cl: '#f0f' }" />
  </div>
</template>

<script>
import CustomDirectivesComponent from "../components/CustomDirectives/index";
export default {
  data() {
    return {
      direction: "left",
    };
  },
  components: {
    CustomDirectivesComponent,
  },
  directives: {
    test: {
      mounted(el, binding) {
        el.style.position = "absolute";
        el.style[binding.arg || "top"] = binding.value + "px";
      },
    },
    color: (el, binding) => {
      el.style.background = binding.value.bg;
      el.style.color = binding.value.cl;
    },
  },
};
</script>

<style lang="less" scoped>
#CustomDirectives {
  position: relative;
}
</style>